<template>
  <div class="curd_table">
    <div class="curd_table_handler">
        <el-row style="margin-top:20px;">
            <slot name="search"></slot>            
                <div class="btn-wrap">
                       <div class="btn-left">
                            <el-button
                                class="custome-btn"
                                v-show="addBtn"
                                type="success"
                                icon="el-icon-plus"
                                size="small"
                                @click="open"
                                >新增</el-button>
                            <slot name="add"></slot>
                       </div>
                       <div class="btn-right" >
                        <slot name="batch"></slot>
                       </div>
                </div>
            </el-row>
    </div>
    <div class="curd_table_content">
        <slot name="table"></slot>
    </div>
    <v-dialog :dialogVisible.sync="dialogVisible" v-bind="$attrs" v-on="$listeners" :title="titleTxt" >
        <slot name="dialog"></slot>
    </v-dialog>
  </div>
    
</template>

<script>
import vDialog from './dialog.vue'

export default {
    props:{
        title:{
            type:String,
            default:''
        },
        span:{
            type:Number,
            default:12
        },
        addBtn:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            mark:'add',
            dialogVisible:false, // 控制对话框显示和隐藏
        }
    },
    computed:{
        titleTxt(){
            return this.mark == 'add'?`新增${this.title}`:`编辑${this.title}`
        }
    },
    components:{
        vDialog
    },
    methods:{
        open(){
            this.mark ='add'
            this.$emit('initObj',{})
            // this.dialogVisible = true
        },
        getMark(){
            return this.mark
        },
        setMark(mark){
            this.mark = mark
        },
        showOrCloseDialog(){
            this.dialogVisible = !this.dialogVisible
        }
    }
}
</script>

<style scoped lang="scss">
.curd_table_handler{
    padding: 10px 0px;
}
.curd_table{
    // height: calc(100% - 40px);
    position: relative;
}
.curd_table_content{
    // position: absolute;
    // bottom: 0PX;
    // top: 60PX;
    // width: 100%;
    // height: calc(100% - 120px);
    box-sizing: border-box;
}

.btn-wrap{
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
}
</style>